Sass 和 SCSS 是兩種與 CSS (Cascading Style Sheets) 相關的預處理器語法，它們主要用於簡化和增強 CSS 的功能，讓開發者能夠撰寫更具結構性、可重用性和可讀性的樣式。

1. SCSS (Sassy CSS)

SCSS 是 Sass 的其中一種語法，與傳統的 CSS 語法幾乎相同，因此學習成本較低。SCSS 文件的副檔名為 .scss，它允許在撰寫樣式時使用 CSS 的所有特性，並且還能使用 Sass 的變數、嵌套、混合 (mixin)、繼承 (inheritance) 等功能。

範例：

$primary-color: #333;

body {
  font-family: Arial, sans-serif;
  color: $primary-color;
  
  h1 {
    font-size: 2em;
  }
}

2. Sass (Syntactically Awesome Stylesheets)

Sass 是 SCSS 的前身，它使用的是縮排語法而不是大括號和分號。這使得 Sass 代碼更簡潔，但對於熟悉 CSS 語法的人來說，閱讀和使用會稍微困難一些。Sass 文件的副檔名為 .sass。

範例：

$primary-color: #333

body
  font-family: Arial, sans-serif
  color: $primary-color
  
  h1
    font-size: 2em

SCSS vs. Sass 差異：

• SCSS：與 CSS 語法相似，使用大括號和分號，學習門檻低。
• Sass：不使用大括號和分號，代碼更簡潔，但需要適應新的縮排語法。

在網頁中的應用

Sass 和 SCSS 都可用於改善 CSS 管理，適用於大型專案，特別是在以下方面有顯著優勢：

• 變數 (Variables)：定義可重複使用的樣式變量，例如顏色、字體大小等。
• 嵌套 (Nesting)：讓 CSS 樣式的結構更加清晰，與 HTML 的結構更一致。
• 混合 (Mixins)：允許你定義樣式片段並在不同的地方重複使用。
• 繼承 (Inheritance)：簡化樣式的重複，減少冗餘代碼。
• 條件與循環：透過條件語句和循環來實現更動態的樣式表。

明天再來試著運用在網頁上吧！💻